<template>
  <a-card>
    <a-input-group compact style="margin-bottom: 15px">
      <a-input
        v-model:value="newTagName"
        placeholder="请输入新建的标签名称,最长5个字符"
        show-count
        :maxLength="8"
        style="width: 500px"
      />
      <a-button type="primary" @click="create()">新建标签</a-button>
    </a-input-group>

    <a-table
      :columns="columns"
      :row-key="(record) => record.key"
      :dataSource="list"
      :pagination="pagination"
      :loading="loading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'updateTime'">
          <a-badge
            color="green"
            :text="formatDate(record.updateTime)"
          ></a-badge>
        </template>
        <template v-if="column.dataIndex === 'createTime'">
          <a-badge
            color="green"
            :text="formatDate(record.createTime)"
          ></a-badge>
        </template>
        <template v-if="column.dataIndex === 'tagName'">
          <div>
            <a-input
              v-if="editableData[record.tagId]"
              v-model:value="editableData[record.tagId][column.dataIndex]"
              placeholder="请输入新建的标签名称,最长8个字符"
              show-count
              :maxLength="8"
              style="margin: -5px 0"
            />
            <template v-else>
              {{ record.tagName }}
            </template>
          </div>
        </template>
        <template v-if="column.key === 'operation'">
          <div class="editable-row-operations">
            <span v-if="editableData[record.tagId]">
              <a-typography-link
                @click="edit(record.tagId, editableData[record.tagId].tagName)"
                >保存</a-typography-link
              >
              <a-popconfirm
                title="您确定要取消编辑吗？"
                okText="确定"
                cancelText="取消"
                @confirm="cancel(record.tagId)"
              >
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a-typography-link @click="enableEdit(record.tagId)"
                >编辑</a-typography-link
              >
              <a-popconfirm
                title="您确定要删除该标签么?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="destory(record.tagId)"
              >
                <a>删除</a>
              </a-popconfirm>
            </span>
          </div>

          <!-- <a-button type="link" @click="enableEdit(record.tagId)">编辑</a-button> -->
        </template>
      </template>
    </a-table>

    <a-modal></a-modal>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, UnwrapRef } from 'vue';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
import moment from 'moment';
import { createTag, editTag, destoryTag, getTagList } from '@/apis/tag';
import { message } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';

interface TagType {
  tagId: number;
  tagName: string;
  updateTime: string;
  createTime: string;
}

interface PaginationType {
  current: number;
  pageSize: number;
  total: number;
}

// interface EditTagFormState {
//   tagId: number;
//   tagName: number;
// }

const columns: ColumnsType = [
  {
    title: '标签ID',
    dataIndex: 'tagId',
    key: 'tagId',
    width: 100
  },
  {
    title: '标签名',
    dataIndex: 'tagName',
    key: 'tagName',
    width: 200
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 160
  }
];

export default defineComponent({
  setup() {
    const list = ref<Array<TagType>>([]);
    const loading = ref<boolean>(false);
    const pagination = reactive<PaginationType>({
      current: 1,
      pageSize: 10,
      total: 0
    });

    const showTagList = () => {
      loading.value = true;
      getTagList().then((res) => {
        list.value = res.data.list;
        pagination.total = res.data.total;
        loading.value = false;
      });
    };

    const newTagName = ref<string>('');

    const create = () => {
      if (!newTagName.value) {
        message.warn('创建的标签名不能为空！');
      } else {
        createTag(newTagName.value).then((res) => {
          message.success(res.msg);
          showTagList();
          newTagName.value = '';
        });
      }
    };

    const editableData: UnwrapRef<Record<string, TagType>> = reactive({});

    const enableEdit = (tagId: number) => {
      editableData[tagId] = cloneDeep(
        list.value.filter((item) => tagId === item.tagId)[0]
      );
    };

    const edit = (tagId: number, tagName: string) => {
      editTag(tagId, tagName).then((res) => {
        message.success(res.msg);
        Object.assign(
          list.value.filter((item) => tagId === item.tagId)[0],
          editableData[tagId]
        );
        delete editableData[tagId];

        showTagList();
      });
    };

    const cancel = (tagId: number) => {
      delete editableData[tagId];
    };

    const destory = (tagId: number) => {
      destoryTag(tagId).then((res) => {
        message.success(res.msg);
        showTagList();
      });
    };

    const formatDate = (date: string) => {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    };

    onMounted(() => {
      showTagList();
    });

    return {
      columns,
      list,
      loading,
      pagination,
      newTagName,
      create,
      editableData,
      enableEdit,
      edit,
      cancel,
      destory,
      formatDate
    };
  }
});
</script>

<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
